{% load static %}
{# Shared certificate canvas — expects: certificate, verify_url, soft_copy (bool), site_settings #}
<div class="tsn-cert {% if soft_copy %}tsn-cert--soft{% endif %}{% if certificate.is_revoked %} tsn-cert--revoked{% endif %}">
  <img class="tsn-cert__bg" src="{% static 'images/certificates/certificate_blank.png' %}" alt="">

  {% if soft_copy %}
  <div class="tsn-cert__watermark" aria-hidden="true">
    <span>SOFT COPY</span>
    <span>NOT AN ORIGINAL HARD COPY</span>
  </div>
  {% endif %}

  <div class="tsn-cert__name">{{ certificate.recipient_name }}</div>
  <div class="tsn-cert__program">{{ certificate.program_title }}</div>
  <div class="tsn-cert__score">Score: {{ certificate.score_percent|floatformat:0 }}%</div>

  <div class="tsn-cert__meta">
    <div class="tsn-cert__meta-row">
      <span class="tsn-cert__meta-label">Certificate ID :</span>
      <span class="tsn-cert__meta-value">{{ certificate.verification_code }}</span>
    </div>
    <div class="tsn-cert__meta-row">
      <span class="tsn-cert__meta-label">Issue Date :</span>
      <span class="tsn-cert__meta-value">{{ certificate.issued_at|date:"d M Y" }}</span>
    </div>
    <div class="tsn-cert__meta-row">
      <span class="tsn-cert__meta-label">Verify At :</span>
      <span class="tsn-cert__meta-value">{{ verify_url }}</span>
    </div>
  </div>

  {% if site_settings.certificate_signature %}
  <div class="tsn-cert__signature">
    <img src="{{ site_settings.certificate_signature.url }}" alt="Signature">
  </div>
  {% endif %}
  {% if site_settings.certificate_signer_name %}
  <div class="tsn-cert__signer-name">{{ site_settings.certificate_signer_name }}</div>
  {% endif %}
</div>